<template>
  <div>
    <div class="header">        
      <div class="heade"><van-icon name="arrow-left" /></div>
      <div class="head">发布房源</div>
      <div class="hear"></div>
    </div>

<div>

<section class="wmassageMask" v-show="writeMessageShow" @click="writeMessageFun($event)">
　　<div class="messageMaskContent" ref="msk">
        <p class="modal-header">发布房源技巧</p>
　　　　 <p class="wenziP">              
                1.小区:输入关键词后,请优先选择系统
                推荐小区，选择系统推荐小区可以查看定
                价参考信息。无系统推荐,也可手动输入。
        </p>
        <p class="wenziP">
                2地址:准确填写楼栋、元、门牌号,
                可以加速房源上架速度。
        </p>
        <p class="wenziP">
                3.期望售价: 建议参考同小区相似户型最新成交信息。合理的价格可以更快出售房源。
        </p>
        <p class="wenziP">
                4.如果您已在店委托请不要在线上重复矮托，可直接到业主中心查看该房源。
               
        </p>
        <p class="modal-footer"  @click="writeMessageShow=false">我知道了</p>
　　　　
　　</div>
</section>
</div>

    <div class="main">
      信息录入
      <span class="warn"><van-icon name="warning" @click="writeMessageShow=true"/></span>
    </div>
  
    <div class="coenter">
        <ul class="city">
          <li>当前城市</li>
          <input type= " text" placeholder="北京" value >
          <li><van-icon name="arrow" /></li>
        </ul>
        <ul class="city">
          <li>小区名称</li>
          <input type= " text" placeholder="请输入" value >
          <li><van-icon name="arrow" /></li>
        </ul>
         <ul class="city">
          <li>门牌号&nbsp;&nbsp;&nbsp;</li>
          <input type= " text" placeholder="请输入" value >
          <li><van-icon name="arrow" /></li>
        </ul>
        <ul class="city">
          <li>期望售价</li>
          <input type= " text" placeholder="请输入" value > 
          <li>万元</li>
        </ul>

    </div>
    <div class="footer">

      <div class="gray"></div>

        <ul class="city hello">
          <li>称呼&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
          <input type= " text" placeholder="请输入" value >        
        </ul>
        <ul class="city hello">
          <li>联系方式</li>
         <input type= " text" placeholder="请输入" value >        
        </ul>
      <div class="textbox">
          您点击"确认发布”后，若您的房源通过初步市核，将会由链家
          经纪人和您取得联系，并对您的房源进行再次核实,核实无误
          后将与您建立服务关系。贝壳平台仅提供信息展示和网络技术
          服务。
      </div>

    <div  class="return"><button class="returns">确认发布</button></div>
    
    <div class="gray"></div>
    </div>
  
  </div>
</template>
<script>
import Vue from 'vue';
import { Icon } from 'vant';
Vue.use(Icon);

export default {
   data () {
　　return {
　　　writeMessageShow: false
　　}
},
methods: {
　　writeMessageFun (ev) {
　　　　if (!this.$refs.msk.contains(ev.target)) {
　　　　　　this.writeMessageShow = false;
　　　　}
　　}
}  
}
</script>

<style lang='stylus' scoped>
.header
  border-bottom  solid 1px #d9d9d9
  background-color width 
  font-size .2rem
  font-weight bolder
  display flex 
  padding .17rem .17rem
  color: #000
  height .6rem
  display: flex;
  align-items: center;
  justify-content: center
  
.head
  width 100%
.heade
  width 100%
.hear
  width 100%
.main 
  font-size .27rem
  font-weight bolder
  padding .1rem .25rem
.warn
  font-size 0.22rem
  color #d9d9d9
  margin-left .1rem
.coenter
  padding 0 .25rem
.city
  border-bottom solid .01rem #d9d9d9
  height .45rem
  display flex
  line-height .5rem
  font-size .17rem
  margin .1rem 0

ul>li:nth-child(1)
  font-weight bolder
  margin-right .2rem

ul>li:nth-child(2)
  width 60%
  color #d9d9d9

ul>li:nth-child(3)
  color #d9d9d9

.gray
  background-color #AAFFFF
  height .1rem

.hello
  padding 0 .25rem


.textbox
  padding 0 .25rem
  color #d9d9d9
  font-size .1rem
  margin-top .15rem

.return
  padding 0 .25rem
  margin-top .15rem
  margin-bottom .3rem

.returns
  background-color #3366ff
  width 100%
  height .5rem
  font-size .2rem
  font-weight bolder
  color #EEFFFF
  border-radius .1rem
input
  border:0px solid;
  color #d9d9d9

</style>
<style>
.wmassageMask{
position: fixed;
top: 0px;
bottom: 0;
left: 0px;
width: 100%;
background-color: rgba(0,0,0,.3);
z-index: 101;
}
.messageMaskContent{
position: absolute;
bottom: 30%;
width: 74%;
height: 50%;
background-color: #fff;
margin:0 15%;
border-radius: .1rem;
}

.wenziP{
padding: 0 .1rem;
font-size: .145rem;
color: #888;
line-height: .2rem;
}
.modal-header{
font-size: .2rem;
padding: .1rem 0;
text-align: center;
}
.modal-footer{
font-size: .2rem;
padding: .19rem 0;
color: #108ee9;
border-top: 1px solid #ddd;
text-align: center;
margin-top: .1rem;
}
</style>
